import { Button } from 'antd';
import React from 'react';
import { history } from 'umi';

import styles from './index.less';
interface Props {
  switchTabPage: (arg0: number) => void;
  isLogin?: boolean; // 登陆还是注册
  qrcodeUrl?: string;
}

const QrCodePage = (props: Props) => {
  const { isLogin, qrcodeUrl } = props;
  const registerWithPhone = () => {
    props.switchTabPage(1);
  };
  return (
    <div className={styles.qrcodeContent}>
      <div className={styles.title}>用户{isLogin ? '登录' : '注册'}</div>
      <div className={styles.scanQrcode}>
        使用 <span>微信</span> 扫描二维码完成{isLogin ? '登录' : '注册'}
      </div>
      <div className={styles.qrcodeBorder}>
        <div className={styles.qrcode}>
          <img src={qrcodeUrl} alt="" />
        </div>
      </div>
      {isLogin ? null : (
        <div>
          <span className={styles.agree}>
            <span>扫描注册表示你同意</span>{' '}
            <span className={styles.agreement}> &nbsp;服务协议 &nbsp;</span>
            <span>和</span>
            <span className={styles.agreement}> &nbsp;隐私协议</span>
          </span>
        </div>
      )}
      {isLogin ? null : (
        <div className={styles.msnLogin}>
          <Button onClick={registerWithPhone} style={{ width: '100%' }} type="primary">
            使用手机号码注册
          </Button>
        </div>
      )}
      {isLogin ? (
        <div onClick={() => window.location.reload()} className={styles.goLogin}>
          <span style={{ color: '#1A3DC9' }}>账号登陆</span>
        </div>
      ) : (
        <div onClick={() => history.push('Login')} className={styles.goLogin}>
          已有账号？<span style={{ color: '#1A3DC9' }}>去登陆</span>
        </div>
      )}
    </div>
  );
};
export default QrCodePage;
